<template>
	<uv-popup ref="popupBox" mode="bottom" :round="10" @maskClick="closeFunc">
		<view class="title">施工记录</view>
		<scroll-view class="scroll-view" scroll-y>
			<view class="uv-form-box">
				<uv-form labelPosition="top" :model="formData" :rules="rules" ref="form" labelWidth="auto">
					<uv-form-item label="施工内容" prop="content" required>
						<uv-textarea height="100" v-model="formData.content" placeholder="请输入内容"></uv-textarea>
					</uv-form-item>
					<uv-form-item label="是否超期" prop="is_overdue" required>
						<uv-radio-group v-model="formData.is_overdue">
							<uv-radio :customStyle="{ margin: '8px' }" label="是" :name="1"></uv-radio>
							<uv-radio :customStyle="{ margin: '8px' }" label="否" :name="2"></uv-radio>
						</uv-radio-group>
					</uv-form-item>
					<uv-form-item label="超期类型" prop="overdue_type" @click="selectReceivingAccount('overdueTypePicker')"
						required v-if="formData.is_overdue == 1">
						<uv-input readonly placeholder="请选择" v-model="formData.overdue_type"></uv-input>
					</uv-form-item>
					<uv-form-item label="超期原因" prop="reason_overdue" v-if="formData.is_overdue == 1" required>
						<uv-textarea height="100" v-model="formData.reason_overdue" placeholder="请输入内容"></uv-textarea>
					</uv-form-item>
					<uv-form-item label="施工进度" prop="construction_progress"
						@click="selectReceivingAccount('constructionProgressPicker')" required>
						<uv-input readonly placeholder="请选择" v-model="formData.construction_progress"></uv-input>
					</uv-form-item>
					<uv-form-item label="施工阶段" prop="construction_stage"
						@click="selectReceivingAccount('constructionStagePicker')" required>
						<uv-input readonly placeholder="请选择" v-model="formData.construction_stage"></uv-input>
					</uv-form-item>
					<uv-form-item label="日志文件" prop="log_file" labelPosition="left">
						<view class="file-box">
							<uv-button type="primary" text="点击上传" @click="uploadFunc"
								customTextStyle="font-weight: 400;font-size: 24rpx;color: #FFFFFF;"
								customStyle="width: 170rpx;height: 60rpx;background: #3B75FF;border-radius: 16rpx;"></uv-button>
						</view>
					</uv-form-item>
					<view class="file-list">
						<view class="file-item" v-for="(item, index) in formData.log_file" :key="index">
							<view class="file-name">{{ item.name }}</view>
							<uv-icon name="close" color="#A4A4A4" @click="delFile(index, 'log_file')"></uv-icon>
						</view>
					</view>
					<uv-form-item label="备注" prop="remark">
						<uv-textarea height="100" v-model="formData.remark" placeholder="请输入内容"></uv-textarea>
					</uv-form-item>
				</uv-form>
			</view>
		</scroll-view>
		<view class="btn-box">
			<uv-button @click="closeFunc" text="取 消" customTextStyle="font-weight: 400;font-size: 28rpx;color: #8F8F8F;"
				customStyle="width: 180rpx;height: 80rpx;background: #FFFFFF;border-radius: 16rpx;border: 2rpx solid #E3E3E3;margin-bottom:20rpx;"></uv-button>
			<uv-button @click="formSubmit" type="primary" text="提 交"
				customTextStyle="font-weight: 400;font-size: 28rpx;color: #FFFFFF;"
				customStyle="width: 500rpx;height: 80rpx;background: #3B75FF;border-radius: 16rpx;margin-bottom:20rpx;"></uv-button>
		</view>
	</uv-popup>
	<!-- 超期类型 -->
	<uv-picker title="超期类型" ref="overdueTypePicker" :columns="overdueTypeList"
		@confirm="pickerConfirm($event, 'overdue_type')" keyName="label"></uv-picker>
	<!-- 施工进度 -->
	<uv-picker title="施工进度" ref="constructionProgressPicker" :columns="constructionProgressList"
		@confirm="pickerConfirm($event, 'construction_progress')" keyName="label"></uv-picker>
	<!-- 施工阶段 -->
	<uv-picker title="施工阶段" ref="constructionStagePicker" :columns="constructionStageList"
		@confirm="pickerConfirm($event, 'construction_stage')" keyName="label"></uv-picker>
</template>

<script setup>
	import {
		computed,
		watch,
		onMounted,
		getCurrentInstance,
		ref,
		defineEmits
	} from 'vue';
	const {
		proxy: that
	} = getCurrentInstance();
	let props = defineProps({
		show: {
			type: Boolean,
			default: () => {
				return false;
			}
		},
		dataObj: {
			type: Object,
			default: () => {
				return {};
			}
		},
		projectNodesItem: {
			default: () => {
				return {};
			}
		}
	});
	// 施工进度
	let constructionProgressList = ref([
		[{
				label: '待进场',
				value: 10
			},
			{
				label: '施工中',
				value: 20
			},
			{
				label: '一次预警',
				value: 30
			},
			{
				label: '二次预警',
				value: 40
			},
			{
				label: '已超期',
				value: 50
			},
			{
				label: '停工中',
				value: 60
			},
			{
				label: '已完工',
				value: 70
			}
		]
	]);
	// 施工阶段
	let constructionStageList = ref([
		[{
				label: '围挡搭建',
				value: 1
			},
			{
				label: '拆除清运',
				value: 2
			},
			{
				label: '防水工程',
				value: 3
			},
			{
				label: '水电预理',
				value: 4
			},
			{
				label: '地面铺砖',
				value: 5
			},
			{
				label: '新建隔墙',
				value: 6
			},
			{
				label: '吊顶施工',
				value: 7
			},
			{
				label: '门窗安装',
				value: 8
			},
			{
				label: '油漆工程',
				value: 9
			},
			{
				label: '墙板铺贴',
				value: 10
			},
			{
				label: '柜体安装',
				value: 11
			},
			{
				label: '柜体水电安装',
				value: 12
			},
			{
				label: '门头广告安装',
				value: 13
			},
			{
				label: '设备安装',
				value: 14
			},
			{
				label: '软装及其他安装工程',
				value: 15
			},
			{
				label: '开荒保洁',
				value: 16
			},
			{
				label: '收尾中',
				value: 17
			},
			{
				label: '停工',
				value: 18
			}
		]
	]);
	// 超期类型
	let overdueTypeList = ref([
		[{
				label: '客户原因',
				value: 1
			},
			{
				label: '供应商原因',
				value: 2
			},
			{
				label: '物业原因',
				value: 3
			},
			{
				label: '城管审批',
				value: 4
			},
			{
				label: '不可抗力',
				value: 5
			},
			{
				label: '现场管理',
				value: 6
			},
			{
				label: '图纸变更',
				value: 7
			},
			{
				label: '其他原因',
				value: 8
			}
		]
	]);

	// 表单数据
	let formData = ref({
		content: '',
		construction_progress: '',
		construction_progress_data: '',
		is_overdue: 2,
		overdue_type: '',
		overdue_type_data: '',
		reason_overdue: '',
		construction_stage: '',
		construction_stage_data: '',
		node_name: '',
		log_file: [],
		remark: ''
	});
	// 表单规则
	let rules = ref({
		content: {
			required: true,
			message: '请输入施工内容',
			trigger: ['blur', 'change']
		},
		construction_progress: {
			required: true,
			message: '请选择施工进度',
			trigger: ['blur', 'change']
		},
		overdue_type: [{
			asyncValidator: (rule, value, callback) => {
				if (!value && formData.value.is_overdue == 1) {
					callback(new Error('请选择超期类型'));
				} else {
					// 如果校验通过，也要执行callback()回调
					callback();
				}
			},
			trigger: ['blur', 'change']
			// 如果是异步校验，无需写message属性，错误的信息通过Error抛出即可
			// message: 'xxx'
		}],
		reason_overdue: [{
			asyncValidator: (rule, value, callback) => {
				if (!value && formData.value.is_overdue == 1) {
					callback(new Error('请填写超期原因'));
				} else {
					// 如果校验通过，也要执行callback()回调
					callback();
				}
			},
			trigger: ['blur', 'change']
			// 如果是异步校验，无需写message属性，错误的信息通过Error抛出即可
			// message: 'xxx'
		}],
		construction_stage: {
			required: true,
			message: '请选择施工阶段',
			trigger: ['blur', 'change']
		}
		// log_file: [
		// 	{
		// 		asyncValidator: (rule, value, callback) => {
		// 			if (!value.length) {
		// 				callback(new Error('请上传预付款凭证'));
		// 			} else {
		// 				// 如果校验通过，也要执行callback()回调
		// 				callback();
		// 			}
		// 		}
		// 		// 如果是异步校验，无需写message属性，错误的信息通过Error抛出即可
		// 		// message: 'xxx'
		// 	}
		// ]
	});

	onMounted(() => {
		// that.$refs.popupBox.open();
		// getCompanyList();
	});

	watch(
		() => props.show,
		(newValue, oldValue) => {
			console.log(newValue, oldValue, '值变化');
			if (props.show) {
				that.$refs.popupBox.open();
			} else {
				formData.value = {
					content: '',
					construction_progress: '',
					is_overdue: 2,
					overdue_type: '',
					reason_overdue: '',
					construction_stage: '',
					node_name: '',
					log_file: [],
					remark: ''
				};
				that.$refs.form.clearValidate();
				that.$refs.popupBox.close();
			}
		}
	);
	const emit = defineEmits(['close', 'onSuccess']);

	const closeFunc = () => {
		emit('close', false);
	};
	// 上传文件
	const uploadFunc = () => {
		uni.chooseMessageFile({
			count: 1, //限制选择的文件数量
			type: 'file', //非图片和视频的文件,不选默认为all，file，video，image
			success(res) {
				console.log(res.tempFiles);
				res.tempFiles.map((item) => {
					formData.value.log_file = [item];
					that.$refs.form.validateField('log_file');
				});
			}
		});
	};
	// 删除文件
	const delFile = (index) => {
		formData.value.log_file.splice(index, 1);
		that.$refs.form.validateField('log_file');
	};

	const selectReceivingAccount = (type) => {
		that.$refs[type].open();
	};

	const pickerConfirm = (e, type) => {
		console.log(e, type);
		formData.value[type] = e.value[0].label;
		formData.value[type + '_data'] = e.value[0];
		that.$refs.form.validateField(type);
	};

	// 表单提交
	const formSubmit = () => {
		let data = formData.value;
		let dataObj = props.dataObj;
		console.log(data, '表单数据', dataObj);
		// console.log(props.projectNodesItem);
		that.$refs.form
			.validate()
			.then((res) => {
				let obj = {
					project_id: dataObj.id,
					content: data.content,
					construction_progress: data.construction_progress_data.value,
					is_overdue: data.is_overdue,
					overdue_type: data.overdue_type_data.value || '',
					reason_overdue: data.reason_overdue,
					construction_stage: data.construction_stage_data.label,
					remark: data.remark,
					node_name: props.projectNodesItem.node_name
				};
				if (!data.log_file.length) {
					// 没有文件
					uni.showLoading({
						mask: true,
						title: '信息提交中...'
					});
					that.$Api
						.wxAddConstructionLogs(obj)
						.then((res) => {
							uni.hideLoading();
							if (res.code == 200) {
								emit('onSuccess', true);
							}
							uni.showToast({
								title: res.code == 200 ? '操作成功' : res.message,
								icon: res.code == 200 ? 'success' : 'error'
							});
						})
						.catch((err) => {
							uni.hideLoading();
						});
					return;
				}
				uni.showLoading({
					mask: true,
					title: '文件上传中...'
				});
				that.$upload(data.log_file).then((res) => {
					console.log(1111, res);
					uni.hideLoading();
					obj.log_file = res.arrResult;
					uni.showLoading({
						mask: true,
						title: '信息提交中...'
					});
					that.$Api
						.wxAddConstructionLogs(obj)
						.then((res) => {
							uni.hideLoading();
							if (res.code == 200) {
								emit('onSuccess', true);
							}
							uni.showToast({
								title: res.code == 200 ? '操作成功' : res.message,
								icon: res.code == 200 ? 'success' : 'error'
							});
						})
						.catch((err) => {
							uni.hideLoading();
						});
				});
			})
			.catch((errors) => {});
	};
	// const statusText = computed(() => {

	// });
</script>

<style lang="scss" scoped>
	.title {
		font-size: 32rpx;
		width: 100%;
		line-height: 100rpx;
		text-align: center;
	}

	.btn-box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
	}

	.scroll-view {
		width: 100%;
		max-height: 50vh;
		background-color: #fff;

		// padding: 0 30rpx;
		// box-sizing: border-box;
		.uv-form-box {
			padding: 0 30rpx !important;
		}

		.file-box {
			width: 100%;
			display: flex;
			flex-direction: row-reverse;
		}

		.file-list {
			width: 100%;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.file-item {
				display: flex;
				justify-content: space-between;
				margin-top: 10rpx;
				margin-left: 10rpx;
				padding: 10rpx;
				background-color: #f8f8f8;
				width: 90%;

				.file-name {
					font-size: 24rpx;
					overflow: hidden;
					/* 确保溢出文本会被隐藏 */
					white-space: nowrap;
					/* 确保文本在一行内显示 */
					text-overflow: ellipsis;
					/* 使用省略号显示文本溢出的部分 */
					width: 80%;
				}
			}

			.file-media {
				width: 150rpx;
				height: 150rpx;
				margin: 0 27rpx 22rpx 0;
				overflow: hidden;
				border-radius: 10rpx;
				position: relative;

				&:nth-child(4n) {
					margin-right: 0;
				}

				.media-item {
					width: 100%;
					height: 100%;
				}

				.icon-box {
					position: absolute;
					z-index: 1;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					background-color: rgba(0, 0, 0, 0.6);
					width: 70rpx;
					height: 70rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
				}

				.del-icon {
					width: 60rpx;
					height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					right: 10rpx;
					top: 10rpx;
					z-index: 1;
					background-color: rgba(0, 0, 0, 0.6);
					border-radius: 10rpx;
				}
			}
		}
	}
</style>